<template>
    <view class="page-container" :class="{ 'page-loaded': pageLoaded }">
        <!-- 顶部背景图区域 -->
        <view class="top-bg-section" :style="{ backgroundImage: `url(${topBgImage})` }">
            <view class="back-btn" @click="goBack">
                <image class="back-image" src="https://zero-one01.oss-cn-shenzhen.aliyuncs.com/icon/back.png"
                    mode="scaleToFill"></image>
            </view>

            <!-- 左下角配置预览图片 -->
            <view class="reconfigure-preview">
                <image class="preview-image" src="https://zero-one01.oss-cn-shenzhen.aliyuncs.com/icon/peizhiyulanwenzi.png"
                    mode="scaleToFill"></image>
            </view>

            <!-- 右下角重新配置按钮 -->
            <view class="reconfigure-btn" @click="goBack">
                <text class="btn-text">重新配置</text>
            </view>
        </view>

        <!-- 选项卡区域 -->
        <view class="tab-bar">
            <view class="tab-bar-item">
                <!-- 左侧按钮：左侧圆角 -->
                <view class="tab-item tab-left" :class="{ active: currentTab === 'configuration' }"
                    @click="changeTab('configuration')">配置清单</view>
                <!-- 右侧按钮：右侧圆角 -->
                <view class="tab-item tab-right" :class="{ active: currentTab === '权益' }" @click="changeTab('权益')">购杆权益</view>
            </view>
        </view>

        <!-- 配置信息区域 -->
        <view class="material-section" :class="{ 'section-transition': tabChanging }">
            <!-- 球杆版本 -->
            <view class="configuration-item">
                <text class="item-label">球杆版本</text>
                <view class="item-value justify-between">
                    <text class="version-name">ZERO ONE 手工杆</text>
                </view>
            </view>

            <!-- 铭牌等级 -->
            <view class="configuration-item">
                <text class="item-label">铭牌等级</text>
                <view class="item-value">
                    <image class="material-image"
                        src="https://zero-one01.oss-cn-shenzhen.aliyuncs.com/app/bailamuyuantu.png"></image>
                    <text class="material-name">{{this.mingpaiName}}</text>
                </view>
            </view>

            <!-- 前肢材料 -->
            <view class="configuration-item">
                <text class="item-label">前肢材料</text>
                <view class="item-value">
                    <image class="material-image"
                        src="https://zero-one01.oss-cn-shenzhen.aliyuncs.com/app/bailamuyuantu.png"></image>
                    <text class="material-name">{{this.qianzhiName}}</text>
                </view>
            </view>

            <!-- 插花规格 -->
            <view class="configuration-item">
                <text class="item-label">插花规格</text>
                <view class="item-value">
                    <image class="material-image"
                        src="https://zero-one01.oss-cn-shenzhen.aliyuncs.com/app/bailamuyuantu.png"></image>
                    <text class="material-name">{{this.guigeName}}</text>
                </view>
            </view>

            <!-- 插花材料（修改为支持多项） -->
            <view class="configuration-item">
                <text class="item-label">插花材料</text>
                <view class="item-value" style="flex-wrap: wrap;">
                    <view class="chahua-item" v-for="(item, index) in chahuaItems" :key="index">
                        <image class="material-image" :src="item.imageUrl"></image>
                        <text class="material-name">{{item.name}}</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 总价和下单区域 -->
        <view class="bottom-bar">
            <view class="price-info">
                <view class="price-group">
                    <text class="final-price">¥{{ totalPrice }}</text>
                    <text class="original-price">¥{{ originalPrice }}</text>
                </view>
                <text class="delivery-tip">锁定订单后预计30个工作日交付</text>
            </view>

            <view class="order-btn" @click="handleOrder">
                <image class="order-image" src="https://zero-one01.oss-cn-shenzhen.aliyuncs.com/icon/lijixiadan.png"
                    :class="{ 'btn-clicked': btnClicked }"></image>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            topBgImage: 'https://zero-one01.oss-cn-shenzhen.aliyuncs.com/app/flower/f1-thumb.png',
            currentTab: 'configuration',
            pageLoaded: false,
            tabChanging: false,
            btnClicked: false,
            totalPrice: '¥1,000',
            originalPrice: '¥1,488',
            configData: '',
            chahuaItems: [], // 存储处理后的插花材料数组
            mingpaiName: '',
            qianzhiName: '',
            guigeName: ''
        };
    },
    created() {
        this.configData = uni.getStorageSync('selectedConfig');
        if (this.configData) {
            this.totalPrice = this.configData.currentFinalPrice;
            this.originalPrice = this.configData.currentOriginalPrice;
            
            // 解析铭牌、前肢和规格
            this.mingpaiName = this.parseSpData(this.configData.mingpai, '级别');
            this.qianzhiName = this.parseSpData(this.configData.qianzhi, '款式');
            this.guigeName = this.parseSpData(this.configData.guige, '插花规格');
            
            // 解析插花材料（现在是数组）
            this.parseChahuaItems();
        }
        console.log('获取配置信息:', this.configData);
    },
    methods: {
        // 解析spData的通用方法
        parseSpData(item, key) {
            if (item && item.spData) {
                try {
                    const spData = JSON.parse(item.spData);
                    return spData[key] || '';
                } catch (error) {
                    console.error('解析spData出错', error);
                    return item.spData || '';
                }
            }
            return '';
        },
        
        // 解析插花材料数组
        parseChahuaItems() {
            if (this.configData && Array.isArray(this.configData.flower)) {
                this.chahuaItems = this.configData.flower.map((item, index) => {
                    return {
                        name: this.parseSpData(item, '插花木料'),
                        imageUrl: 'https://zero-one01.oss-cn-shenzhen.aliyuncs.com/app/bailamuyuantu.png', // 使用默认图片
                        index: index
                    };
                });
            }
        },
        
        changeTab(tab) {
            this.currentTab = tab;
        },
        goBack() {
            uni.navigateBack();
        },
        handleOrder() {
            if (!this.btnClicked) {
                uni.navigateTo({
                    url: '/pages/index/confirmOrder'
                });
                return;
            }

            this.btnClicked = true;
            setTimeout(() => {
                this.btnClicked = false;
            }, 200);
        }
    },
    mounted() {
        setTimeout(() => {
            this.pageLoaded = true;
        }, 100);
    }
};
</script>

<style scoped>
/* 页面容器 */
.page-container {
    background-color: #1a1a1a;
    color: white;
    min-height: 100vh;
    overflow-x: hidden;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.page-container.page-loaded {
    opacity: 1;
}

/* 顶部背景区域 */
.top-bg-section {
    position: relative;
    background-size: cover;
    background-position: center;
    height: 40vh;
    min-height: 300px;
    max-height: 500px;
}

.back-btn {
    position: absolute;
    top: 80rpx;
    left: 20rpx;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-image {
    width: 80rpx;
    height: 80rpx;
    object-fit: contain;
}

.reconfigure-preview {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 360rpx;
    height: 90rpx;
    border-radius: 12rpx;
    overflow: hidden;
}

.preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reconfigure-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 12rpx 24rpx;
    border-radius: 24rpx;
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 16px;
}

/* 选项卡 */
.tab-bar {
    display: flex;
    justify-content: center;
    padding: 15px 20px;
    background-color: #1a1a1a;
    position: sticky;
    top: 0;
    z-index: 10;
    margin: 0 20rpx;
}

.tab-bar-item {
    display: flex;
    width: 100%;
    border-radius: 20rpx;
    overflow: hidden;
    background-color: #222;
}

.tab-item {
    flex: 1;
    text-align: center;
    background-color: #333;
    color: #fff;
    padding: 20rpx 0;
    font-size: 30rpx;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-item.active {
    background-color: #666;
}

.tab-left {
    border-top-left-radius: 20rpx;
    border-bottom-left-radius: 20rpx;
}

.tab-right {
    border-top-right-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
}

/* 配置信息 */
.material-section {
    padding: 20px;
}

/* 每个配置项容器：Flex布局确保label和value在同一行 */
.configuration-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    width: 100%;
}

/* 标签样式：固定宽度左对齐，为右侧内容留出空间 */
.item-label {
    font-size: 16px;
    color: #999;
    width: 30%; /* 固定左侧标签宽度 */
    padding-right: 20rpx;
    box-sizing: border-box;
    text-align: left; /* 标签左对齐，与右侧内容形成对比 */
}

/* 核心修改：item-value靠右展示 */
.item-value {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 70%; /* 占据剩余宽度 */
    margin-top: 0;
    flex-wrap: wrap; /* 允许内容换行 */
}

/* 球杆版本的value需要两端对齐时使用 */
.justify-between {
    justify-content: space-between;
}

.version-name {
    font-size: 18px;
    font-weight: 500;
}

.version-price {
    font-size: 18px;
    font-weight: 500;
    text-align: right;
}

.material-image {
    width: 60rpx;
    height: 60rpx;
    border-radius: 4rpx;
    object-fit: cover;
}

.material-name {
    font-size: 16px;
    color: #ffffff;
}

/* 插花材料项目样式 */
.chahua-item {
    display: flex;
    align-items: center;
    margin-right: 20rpx;
    margin-bottom: 15rpx;
}

/* 底部信息栏 */
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #0a0a0a;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.price-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.price-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.final-price {
    font-size: 24px;
    font-weight: bold;
    position: relative;
}

.final-price::after {
    content: '';
    right: -10px;
    top: 50%;
    width: 1px;
    height: 18px;
    background-color: #999;
    transform: translateY(-50%);
}

.delivery-tip {
    font-size: 14px;
    color: #999;
}

.original-price {
    color: #999;
    text-decoration: line-through;
    font-size: 14px;
}

.order-btn {
    display: flex;
    align-items: center;
}

.order-image {
    width: 200rpx;
    height: 80rpx;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.2s;
}

.order-image:active,
.order-image.btn-clicked {
    transform: scale(0.95);
}
</style>